<template>
    <div>
        <VoSchemaForm :model="model" :schema="schema" :rules="rules"></VoSchemaForm>
        <div>
            <pre>{{modelJson}}</pre>
        </div>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </div>
</template>

<script>
import CodeTpl from '@/views/md/sf/autocomplete.md';
export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            model: {},
            schema: {
                properties: {
                    nameEnum: {
                        label: '静态数据',
                        widget: 'autocomplete',
                        enum: [
                            { value: '1', text: '建议1' },
                            { value: '2', text: '建议2' },
                            { value: '3', text: '建议3' },
                            { value: '4', text: '建议4' }
                        ],
                        ui: {
                            placeholder: '请输入'
                        }
                    },
                    nameAsyncData: {
                        label: '异步数据',
                        widget: 'autocomplete',
                        asyncData(resolve, query) {
                            if (query) {
                                setTimeout(() => {
                                    resolve(Array(6).fill('').map((e, i) => ({ value: `${query}-${i + 1}` })))
                                }, 2000)
                            } else {
                                resolve([])
                            }
                        },
                        ui: {
                            placeholder: '请输入'
                        }
                    },
                    name1: {
                        label: '属性',
                        widget: 'autocomplete',
                        ui: {
                            placeholder: '请输入',
                            prefixIcon: 'el-icon-s-comment',
                            suffixIcon: 'el-icon-help',
                            hideLoading: false,
                            maxlength: 10,
                            showWordLimit: true,
                            fetchSuggestions: (query, cb) => {
                                const result = [
                                    { value: '建议1' },
                                    { value: '建议2' },
                                    { value: '建议3' }
                                ];
                                setTimeout(() => {
                                    cb(result)
                                }, 1000)
                            }
                        }
                    },
                    name2: {
                        label: 'focus时不显示建议',
                        widget: 'autocomplete',
                        ui: {
                            placeholder: '请输入',
                            triggerOnFocus: false,
                            'fetch-suggestions': (query, cb) => {
                                const result = [
                                    { value: `建议1-${query}` },
                                    { value: `建议2-${query}` },
                                    { value: `建议3-${query}` }
                                ];
                                setTimeout(() => {
                                    cb(result)
                                }, 1000)
                            }
                        }
                    },
                    name3: {
                        label: '自定义模板',
                        widget: 'autocomplete',
                        ui: {
                            placeholder: '请输入',
                            'fetch-suggestions': (query, cb) => {
                                const result = [
                                    { value: '建议1', brief: '三没一句真话' },
                                    { value: '建议2', brief: '千万别选一' },
                                    { value: '建议3', brief: '二是个骗子' }
                                ];
                                setTimeout(() => {
                                    cb(result)
                                }, 1000)
                            }
                        },
                        slots: {
                            default(h, { item }) {
                                return [
                                    <p style="line-height: 24px;">{ item.value }</p>,
                                    <span style="color: #909399; font-size: 12px;">{ item.brief }</span>
                                ]
                            }
                        }
                    },
                    name4: {
                        label: '插槽',
                        widget: 'autocomplete',
                        ui: {
                            placeholder: '请输入',
                            'fetch-suggestions': (query, cb) => {
                                const result = [
                                    { value: '建议1', brief: '三没一句真话' },
                                    { value: '建议2', brief: '千万别选一' },
                                    { value: '建议3', brief: '二是个骗子' }
                                ];
                                setTimeout(() => {
                                    cb(result)
                                }, 1000)
                            }
                        },
                        slots: {
                            prefix(h) {
                                return <i class="el-icon-edit" style={ { lineHeight: '32px' } }></i>
                            },
                            suffix(h) {
                                return <i class="el-icon-share" style={ { lineHeight: '32px' } }></i>
                            },
                            prepend: (h) => {
                                return (
                                    <el-select vModel={ this.prependValue } style={ { width: '110px' } }>
                                        {
                                            ['手机号', '身份证', '邮箱'].map(option => {
                                                return <el-option props={{
                                                    label: option,
                                                    value: option
                                                }} key={ option }>{ option }</el-option>
                                            })
                                        }
                                    </el-select>
                                )
                            },
                            append: (h) => {
                                return <el-button vOn:click={ this.nameAppend }>append</el-button>
                            }
                        }
                    }
                },
                ui: {
                    labelWidth: 160
                },
                col: {
                    span: 12
                }
            },
            rules: {
                td1: [
                    { required: true, message: '必填项', trigger: 'change' }
                ]
            },
            prependValue: ''
        }
    },
    computed: {
        modelJson() {
            return JSON.stringify(this.model, null, 4)
        }
    },
    methods: {
        nameAppend() {
            console.log(this.prependValue);
        }
    }
}
</script>

<style>

</style>
